웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지에 글을 작성하면서 실수로 닫거나 저장이 안되는 경우를 생각해볼 수 있죠. 이런 경우는 누구나 한번쯤 경험해보셨을 겁니다.
웹이즈프리의 글 작성은 간단한 cms에서 작성되는데 자동으로 저장되는 기능이 필요하겠다..라는 생각만 가지고 온지 꽤 되었습니다ㅠ
그래서! 이번에는 작성중인 글이 일정 시간으로 후에 자동으로 저장되는 기능을 만들어보려합니다. 이 기능은 서버를 이용할 수 있겠지만 html5의 localStorage를 활용해보려합니다. 여기서 원하는 기능을 요약해보면!!
위 기능은 필수적으로 고려할 내용입니다. 그럼 아래 예제를 봐주세요!
! css code
그럼 아래는 글을 작성하면서 정해진 시간마다 반복해서 글을 저장할 스크립트 코드입니다.
이제 코드가 완성되었습니다. 꼭 필요한 기능이 아닐까 생각됩니다.
웹이즈프리의 글 작성은 간단한 cms에서 작성되는데 자동으로 저장되는 기능이 필요하겠다..라는 생각만 가지고 온지 꽤 되었습니다ㅠ
그래서! 이번에는 작성중인 글이 일정 시간으로 후에 자동으로 저장되는 기능을 만들어보려합니다. 이 기능은 서버를 이용할 수 있겠지만 html5의 localStorage를 활용해보려합니다. 여기서 원하는 기능을 요약해보면!!
- 일정시간을 설정할 수 있을 것(예제는 60초)
- 로컬(사용자 pc)에 자동으로 저장되며 최근의 버전 세개까지 저장
- 만약 기존과 동일한 경우 저장하지 않음
- 지원되지 않는 브라우저를 고려
위 기능은 필수적으로 고려할 내용입니다. 그럼 아래 예제를 봐주세요!
# 자바스크립트로 글 작성시 자동으로 저장되는 기능
먼저 아래는 html과 css입니다. 간단한 입력폼으로 일정시간이 지나면 저장될 것입니다.! html code
입력하면 받기위해서 textarea 태그를 사용하였습니다.<textarea id="test"></textarea>
! css code
textarea { width: 200px; height: 100px; }
그럼 아래는 글을 작성하면서 정해진 시간마다 반복해서 글을 저장할 스크립트 코드입니다.
! Javascript code
(function () {
var autoSave = new Object();
(function (obj) {
obj.configuration = {
interval: 60 // second(s)
};
obj.bindTimer = function() {
var textEle = document.querySelector('#test');
var textVal = textEle.value;
var ref1, ref2, ref3; // Newer -> Older
// Save to localStorage
var encodedTextVal = btoa(textVal);
ref1 = window.localStorage.getItem('textval-01');
ref2 = window.localStorage.getItem('textval-02');
if ((window.localStorage) && (encodedTextVal != ref1)){
window.localStorage.setItem('textval-01', encodedTextVal);
window.localStorage.setItem('textval-02', ref1);
window.localStorage.setItem('textval-03', ref2);
}
else if (!window.localStorage) {
console.log('Error' + ': Your browser not support')
return false;
}
};
obj.start = function() {
obj.bindTimer();
setTimeout(function() {
obj.start();
}, obj.configuration.interval * 1000);
};
obj.start();
})(autoSave);
})();
맨 위에 configuration은 저장될 시간을 초단위로 설정합니다. 또한 텍스트가 저장할때 인코딩합니다. 여기서는 base64 인코딩 방식을 사용하였습니다.var autoSave = new Object();
(function (obj) {
obj.configuration = {
interval: 60 // second(s)
};
obj.bindTimer = function() {
var textEle = document.querySelector('#test');
var textVal = textEle.value;
var ref1, ref2, ref3; // Newer -> Older
// Save to localStorage
var encodedTextVal = btoa(textVal);
ref1 = window.localStorage.getItem('textval-01');
ref2 = window.localStorage.getItem('textval-02');
if ((window.localStorage) && (encodedTextVal != ref1)){
window.localStorage.setItem('textval-01', encodedTextVal);
window.localStorage.setItem('textval-02', ref1);
window.localStorage.setItem('textval-03', ref2);
}
else if (!window.localStorage) {
console.log('Error' + ': Your browser not support')
return false;
}
};
obj.start = function() {
obj.bindTimer();
setTimeout(function() {
obj.start();
}, obj.configuration.interval * 1000);
};
obj.start();
})(autoSave);
})();
btoa() // 인코딩 base64 방식으로 수행
이제 코드가 완성되었습니다. 꼭 필요한 기능이 아닐까 생각됩니다.
! 생각해볼 부분
모든 글이 저장되므로 보안에 필요한 부분은 저장되지 않는 것이 좋을 것입니다. 이 경우를 생각하면 sessionStorage를 사용하는 것이 보안에 유리해보입니다.아래의 글도 찾고 계시지 않나요?